Micron Document
____ _ _ _ _
| _ \ ___ | |_ (_) _ __ ___ __| | (_) __ _
| |_) | / _ \ | __| | | | '_ \ / _ \ / _| | | | / _ |
| _ < | __/ | |_ | | | |_) | | __/ | (_| | | | | (_| |
|_| \_\ \___| \__| |_| | .__/ \___| \__,_| |_| \__,_|
|_|


The NomadNet German Wikipedia | Archives | Info
- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b- `b

🔍 Search

¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

JSX (JavaScript)
part 1/2 · 7.0 KB total
Parts · Full · Next ▶
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
top
JSX (JavaScript Syntax Extension oder gelegentlich JavaScript XML) ist eine Syntax-Erweiterung für JavaScript (Syntaktischer Zucker).cite-ref-4[4] JSX wurde für das Framework React entwickelt und wird als Auszeichnungssprache für Komponenten verwendet.

Contents

• Syntax
• Attribute
• Sicherheit (XSS)
• Props in JSX
• Vue
• TSX
• Siehe auch
• Einzelnachweise

──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

Syntax

JSX ist in seiner Syntax ähnlich zu Hypertext Markup Language, wie das folgende Beispiel zeigt:cite-ref-5[5]

const user = "Max Mustermann";
const element = (
<div>
<h1 className="greeting">Hallo, {user}</h1>
<a href="https://www.reactjs.org">link</a>
</div>
);

Beim Übersetzen von JSX wird daraus der folgende React-JavaScript-Code mit erzeugt:cite-ref-6[6]

const user = "Max Mustermann";
const element = React.createElement("div", {}, [
React.createElement("h1", { className: "greeting" }, ["Hallo, ", user]),
React.createElement("a", { href: "https://www.reactjs.org" }, ["link"])
]);

Der folgende Beispielcode zeigt, wie man JSX in React mittels ReactDOM.render() einbetten kann.cite-ref-7[7]cite-ref-8[8]cite-ref-9[9]

const name = 'Max Mustermann';
const element = <h1>Hallo, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

Attribute

Man benutzt meistens Anführungszeichen um string-Literale als Attribute zu verwenden:

const element = <a href="https://www.wikipedia.org"> link </a>;

Ebenfalls kann man geschweifte Klammern verwenden, um JavaScript-Ausdrücke in ein Attribut einzubinden:

const element = <img src={user.avatarUrl}></img>;

Sicherheit (XSS)

JSX verhindert Injection-Attacken wie Cross-Site-Scripting (XSS). Es ist sicher, Benutzereingaben wie diese einzubetten:

const title = response.potentiallyMaliciousInput;
// Dies ist sicher:
const element = <h1>{title}</h1>;

Standardmäßig entschlüsselt React DOM alle in JSX eingebetteten Werte, bevor sie gerendert werden. Alles wird in eine Zeichenkette konvertiert, bevor es gerendert wird.cite-ref-10[10]

Props in JSX

Man kann einen beliebigen JavaScript-Ausdruck als Prop übergeben, indem man ihn mit {} umgibt. Zum Beispiel in diesem Code:

<MyComponent foo={1 + 2 + 3 + 4} />

──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Parts · Full · Next ▶